<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            height: 500px;
            width: 100%;
            overflow: hidden;
        }

        #result {
            height: calc(100% - 610px);
            width: 100%;
            font-size: 12px;
        }

        #resultText {
            height: 70px;
            font-size: 18px;
            padding: 6px;
        }

        #r-result {
            height: 40px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: #A9A9A9 1px solid;
            margin-bottom: 2px;
            margin-top: 3px;
        }

        .btn {
            width: 100px;
            height: 34px;
            border: 1px solid #999;
            border-radius: 5px;
            margin: 0 auto;
            font-size: 18px;
            text-align: center;
            line-height: 34px;
            color: #333;
            background: #E8E7E3;
        }
    </style>
    <!-- 引入百度地图api 携带 AK -->
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=vHlWIzGYtdWW3aSSENUInGt4actfQBFX"></script>
    <!-- 引入搜索功能 -->
    <script type="text/javascript"
            src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css"/>
    <!-- 引入 uni-app 的 SDK -->
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    <!--    <script type="text/javascript" src="http://192.168.1.7:8080/profile/app/static/js/hybrid_html_uni.webview.1.5.5.js"></script>-->
    <!--    <title>选择地址</title>-->
    <title>百度地图</title>
</head>

<body>
<!-- 顶部搜索栏 -->
<div id="search">
    <div id="r-result"><input type="text" id="suggestId" size="20" placeholder="位置搜索" value="百度"
                              style="width:100%;height:40px;"/></div>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</div>
<!-- 地图 -->
<div id="allmap"></div>
<!-- 选中的位置回显 -->
<div id="result">
    <div id="resultText"></div>
    <div class="btn">确定地点</div>
</div>

<script type="text/javascript">
    document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"><\/script>');

    var map = new BMap.Map('allmap');
    var poi = new BMap.Point(116.307852, 40.057031); //罗马的坐标

    var addressPost; //存储附近信息数据
    var fullAddress; //完整地址 市-区-街道-附近地址
    var city; //存储附近信息数据
    var CURRENT_LNG; //记录坐标
    var CURRENT_LAT; //记录坐标
    var lng, lat; //记录坐标

    map.centerAndZoom(poi, 18); //设置地图中心点 和 缩放等级
    map.enableScrollWheelZoom();//开启鼠标滚轮

    function G(id) {
        return document.getElementById(id);
    }

    //获取当前位置附近地址信息 --- geoc.getLocation
    var geoc = new BMap.Geocoder();
    var getCurrentLocation = function (lg, lt) {
        //geoc.getLocation 获取到 坐标 以及 包含附近地址信息的数组
        geoc.getLocation(new BMap.Point(lg, lt), function (rs) {
            // debugger
            //取数组第一个地址信息为选中的位置，也可现为地址列表
            var nearbyAddeessArr = rs.surroundingPois[0];
            document.getElementById('resultText').innerText = '当前位置 ：' + nearbyAddeessArr.title + '——' + nearbyAddeessArr.address;
            addressPost = nearbyAddeessArr.title + '——' + nearbyAddeessArr.address;

            fullAddress = rs.addressComponents.city + "-" + rs.addressComponents.district
                + "-" + rs.addressComponents.street + "-" + nearbyAddeessArr.title;

            city = nearbyAddeessArr.city;
            CURRENT_LNG = lg;
            CURRENT_LAT = lt;

            //debugger
        });
    }


    let urlParams = getUrlParams(window.location.href);
    if(Object.keys(urlParams).length !== 0){
        //经纬度定位
        setPlaceByPoint(urlParams.lng, urlParams.lat);

    }else {

        //通过浏览器获取当前定位的坐标
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                lng = r.point.lng
                lat = r.point.lat
                getCurrentLocation(lng, lat)
            } else {
                alert('failed' + this.getStatus());
            }
        }, {enableHighAccuracy: true})
    }

    //给地图添加点击事件 标记 marker
    map.addEventListener("touchstart", function (e) {
        map.clearOverlays();//清除地图上所有覆盖物 marker
        //获取坐标
        var lng = e.point.lng;
        var lat = e.point.lat;

        //创建marker标注位置
        var pt = new BMap.Point(lng, lat);
        //new BMap.Icon("本地marker图标路径",图标的尺寸,{marker偏移量,窗口的偏移量})
        var myIcon = new BMap.Icon("https://mapopen-website-wiki.cdn.bcebos.com/markers.png", new BMap.Size(19, 25), {
            anchor: new BMap.Size(10, 25),
            imageOffset: new BMap.Size(0, 0 - 12 * 25)
        });
        var marker2 = new BMap.Marker(pt, {icon: myIcon});  // 创建标注实例
        map.addOverlay(marker2); //将标注添加到地图中
        getCurrentLocation(lng, lat)
    });

    // 以下是地点检索功能

    //创建一个search实例
    var ac = new BMap.Autocomplete(
        {
            "input": "suggestId",
            "location": map
        });


    var myValue;//存储地址检索结果
    ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        setPlace();
    });

    // 地图移动到检索的位置，并且标记
    function setPlace() {
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun() {
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
            getCurrentLocation(pp.lng, pp.lat)
        }

        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }


    //////////////////////////////////////// 追加经纬度回显 //////////////////////////////////////////////////////////////////
    // 根据经纬度标点
    function setPlaceByPoint(lngParam, latParam) {
        // debugger
        map.clearOverlays();    //清除地图上所有覆盖物
        // const markerPoint = new BMapGL.Point(116.331398,39.897445) //创建坐标
        const markerPoint = new BMap.Point(lngParam, latParam) //创建坐标
        map.centerAndZoom(markerPoint, 18);
        map.addOverlay(new BMap.Marker(markerPoint)) //添加标注


        //根据经纬度 回显地址
        // 创建地理编码实例
        var myGeo = new BMap.Geocoder();
        // 根据坐标得到地址描述
        myGeo.getLocation(new BMap.Point(lngParam, latParam), function (rs) {
            // if (result) {
            //     alert(result.address);
            // }

            //取数组第一个地址信息为选中的位置，也可现为地址列表
            var nearbyAddeessArr = rs.surroundingPois[0];
            document.getElementById('resultText').innerText = '当前位置 ：' + nearbyAddeessArr.title + '——' + nearbyAddeessArr.address;
            addressPost = nearbyAddeessArr.title + '——' + nearbyAddeessArr.address;

            fullAddress = rs.addressComponents.city + "-" + rs.addressComponents.district
                + "-" + rs.addressComponents.street + "-" + nearbyAddeessArr.title;

            city = nearbyAddeessArr.city;
            CURRENT_LNG = lngParam;
            CURRENT_LAT = latParam;
        });
    }

    //获取url参数
    // const url = 'https://www.example.com/?name=John&age=25';
    // console.log(getUrlParams(url)); // { name: 'John', age: '25' }
    function getUrlParams(url) {
        const reg = /(\w+)=([^&]+)/g;
        const params = {};
        let match;

        while ((match = reg.exec(url)) !== null) {
            params[match[1]] = match[2];
        }

        return params;
    }

    //////////////////////////////////////// 追加经纬度回显 //////////////////////////////////////////////////////////////////


    //确定地址 将数据传输到 uniapp 的 webview内
    document.addEventListener('UniAppJSBridgeReady', function () {

        //uniapp 挂载完毕，在内部可以使用uniapp 部分 api,具体看 官方文档 webview
        document.querySelector('.btn').addEventListener('touchstart', function () {

            uni.getEnv(function (res) {
                console.log('当前环境：' + JSON.stringify(res));
                // alert(JSON.stringify(res));

                if (res.plus) {
                    //app跳回去
                    uni.postMessage({
                        data: {
                            addressPost,
                            fullAddress,
                            city,
                            CURRENT_LNG,
                            CURRENT_LAT
                        }
                    });
                    return;
                }



                // debugger
                if(res.h5){
                    //小程序 测试的时候也是标识是 h5 平台， 为了以防万一， 再通过小程序提供的api 判断

                    var ua = navigator.userAgent.toLowerCase();
                    if(ua.match(/MicroMessenger/i)=="micromessenger") {
                        //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
                        wx.miniProgram.getEnv((res)=>{
                            if (res.miniprogram) {
                                // alert("在小程序里");

                                //小程序的操作
                                const data = {
                                    addressPost,
                                    fullAddress,
                                    city,
                                    CURRENT_LNG,
                                    CURRENT_LAT
                                };
                                // wx.miniProgram.switchTab({url: '/pages/index/index'})
                                wx.miniProgram.navigateTo({url: '/pages/baidumap/baidumap?baiduData='+JSON.stringify(data)})


                            } else {
                                // alert("不在小程序里");
                            }
                        })
                    }else{
                        // alert('不在微信里');

                        //非小程序的操作，h5
                        const data = {
                            addressPost,
                            fullAddress,
                            city,
                            CURRENT_LNG,
                            CURRENT_LAT
                        };
                        uni.navigateTo({url: '/pages/baidumap/baidumap?baiduData='+JSON.stringify(data)})
                    }

                    return;
                }


                if(true){
                    //后面就是其他平台
                    return;
                }


                //小程序的跳回去
                // wx.miniProgram.postMessage({
                //     data: {
                //         addressPost,
                //         fullAddress,
                //         city,
                //         CURRENT_LNG,
                //         CURRENT_LAT
                //     }
                // });

                const data = {
                    addressPost,
                    fullAddress,
                    city,
                    CURRENT_LNG,
                    CURRENT_LAT
                };
                // wx.miniProgram.switchTab({url: '/pages/index/index'})
                wx.miniProgram.navigateTo({url: '/pages/baidumap/baidumap?baiduData='+JSON.stringify(data)})
                // wx.miniProgram.navigateBack();

            });

        })

    });

</script>
</body>

</html>
